<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        .row{
            margin-bottom: 20px;
        }
        .row.row {
            margin-top: 10px;
            margin-bottom: 0px;
        }
            [class*="col-"]{
                padding-top:15px;
                padding-bottom:15px;
                background-color: #eee;
                background-color: rgba(86,61,124,.15);
                border: 1px solid #ddd;
                border: 1px solid rgba(86,64,124,.2);
            }
    </style>
</head>
<body>
<div class="container">
    <!--row最多一行12列，手机用xs 平板用sm 小型显示器用md 大型显示器用lg，col-md后面的数字表示占用几列-->

    <!--一行12列-->
    <div class="row">
         <div class="col-md-1">col-md-1</div>
         <div class="col-md-1">col-md-1</div>
         <div class="col-md-1">col-md-1</div>
         <div class="col-md-1">col-md-1</div>
         <div class="col-md-1">col-md-1</div>
         <div class="col-md-1">col-md-1</div>
         <div class="col-md-1">col-md-1</div>
         <div class="col-md-1">col-md-1</div>
         <div class="col-md-1">col-md-1</div>
         <div class="col-md-1">col-md-1</div>
         <div class="col-md-1">col-md-1</div>
         <div class="col-md-1">col-md-1</div>
     </div>

    <!--一行4列-->
    <div class="row">
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-3">col-md-3</div>
    </div>

    <!--长文本会自动改变宽度-->
    <div class="row">
        <div class="col-md-3">col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3</div>
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-3">col-md-3</div>
    </div>

    <!--col-md-offset-1表示此div偏移1格-->
    <div class="row">
        <div class="col-md-4 col-md-offset-1">col-md-3</div>
        </div>

    <!--嵌套使用-->
    <div class="row">
        <div class="col-sm-9">
            one
            <div class="row">
                <div class="col-xs-8">
                    first
                </div>
                <div class="col-xs-4">
                    two
                </div>
            </div>
        </div>
    </div>

    <!--排序-->
    <div class="row">
        <div class="col-md-9 col-md-push-3">col-md-9</div>
        <div class="col-md-3 col-md-pull-9">col-md-3</div>
    </div>

</div>
</body>
</html>